<script setup>
import { ref, reactive, onMounted, nextTick } from 'vue'
import { ElMessage, ElMessageBox } from 'element-plus'
import { get, post } from '@/myaxios'

// 删除功能
const deleteFormOpen = (row) => {
    ElMessageBox.confirm(`确定删除[${row.id}-${row.nickname} - ${row.createTime}]的动态吗？`, '提示', {
        confirmButtonText: '确定',
        cancelButtonText: '取消',
        type: 'warning',
    })
        .then(() => {
            operationData("playCustomerDynamics/delete", row)
        })
        .catch(() => {
            console.log('cancel')
        })
}

/**
 * 条件查询
 */
const queryForm = reactive({
    nickname: '',
    createTime: ''
})
const queryFormRef = ref()

const onSubmit = () => {
    queryData(queryForm)
}
const onReset = () => {
    queryFormRef.value.resetFields()
    queryData({})
}

/**
 * 分页组件
 */
const pageInfo = reactive({
    pageData: {
        page: 1,
        pageSize: 10,
        total: 77
    }
})

const handleCurrentChange = (val) => {
    pageInfo.pageData.page = val
    const paramsObj = { ...pageInfo.pageData, ...queryForm }
    queryData(paramsObj)
}

const handleSizeChange = (val) => {
    pageInfo.pageData.page = 1
    pageInfo.pageData.pageSize = val
    const paramsObj = { ...pageInfo.pageData, ...queryForm }
    queryData(paramsObj)
}

// 表格数据
const tableList = reactive({ tableData: [] })

// 显示动态内容详情
const showNotice = (notice) => {
    ElMessageBox({
        title: '动态内容',
        message: notice
    })
}

/**
 * 公共函数
 */
const queryData = (params) => {
    get("playCustomerDynamics/query", params)
        .then((resp) => {
            if (resp.data.code === 2000) {
                tableList.tableData = resp.data.returnData || []
                Object.assign(pageInfo.pageData, resp.data.pageInfo)
            } else if (resp.data.code === 2001) {
                tableList.tableData = []
                Object.assign(pageInfo.pageData, { page: 1, pageSize: 10, total: 0 })
            }
        })
        .catch((error) => {
            console.error('查询失败:', error)
        })
}

const operationData = (url, params) => {
    post(url, params)
        .then((resp) => {
            if (resp.data.code === 2010) {
                ElMessage.success(resp.data.msg)
            } else if (resp.data.code === 2011) {
                ElMessage.error(resp.data.msg)
            }

            const paramsObj = { ...pageInfo.pageData, ...queryForm }
            queryData(paramsObj)
        })
        .catch((error) => {
            console.error('操作失败:', error)
        })
}

onMounted(() => {
    queryData({})
})
</script>

<template>

<el-form ref="queryFormRef" :inline="true" :model="queryForm">
        <el-form-item label="用户名称" prop="nickname">
            <el-input v-model="queryForm.nickname" placeholder="nickname" />
        </el-form-item>
        <el-form-item label="动态日期" prop="createTime">
            <!-- <el-input v-model="queryForm.createTime" placeholder="createTime" /> -->
            <el-date-picker
                v-model="queryForm.createTime"
                type="date"
                placeholder="选择日期"
                value-format="YYYY-MM-DD"
            />
        </el-form-item>
        <el-form-item>
            <el-button type="primary" plain @click="onSubmit">查询</el-button>
            <el-button type="primary" plain @click="onReset">重置</el-button>

        </el-form-item>
    </el-form>

    <el-table height="500px" ref="tableRef" :data="tableList.tableData" style="width: 100%">
        <el-table-column prop="id" label="动态编号" width="80"></el-table-column>
        <el-table-column prop="uid" label="用户编号" width="80"></el-table-column>
        <el-table-column prop="nickname" label="用户名称" width="180"></el-table-column>
        <el-table-column prop="content" label="动态内容" width="180">
            <template #default="scope">
                <el-link href="javascript:void(0)" type="primary" @click="showNotice(scope.row.content)">
                    <span v-if="scope.row.content.length>=8">{{scope.row.content.substr(0,8)}}...</span>
                    <span v-else>{{scope.row.content}}</span>
                </el-link>
            </template>

        </el-table-column>
        <el-table-column prop="createTime" label="动态日期" width="180"></el-table-column>
        <el-table-column prop="likenum" label="点赞数" width="80"></el-table-column>


        <el-table-column label="操作" width="80">
            <template #default="scope">
                <el-button type="primary" plain size="small" @click="deleteFormOpen(scope.row)">删除</el-button>
            </template>
        </el-table-column>

    </el-table>

    <el-pagination v-model:current-page="pageInfo.pageData.page" v-model:page-size="pageInfo.pageData.pageSize"
        :page-sizes="[10, 20, 30]" layout="total, sizes, prev, pager, next, jumper" :total="pageInfo.pageData.total"
        @size-change="handleSizeChange" @current-change="handleCurrentChange" />
</template>

<style scoped>

</style>